<template>
    <div class="home__container--main">
        <div class="main_grid">
            <HomeMainNav />
            <HomeMainSectionLeft />
            <HomeMainSectionRight />
            <HomeMainFooter />
        </div>
        <!-- 其余部分 -->
        <div style="height: 200px;"></div>
    </div>
</template>

<script setup lang='ts'>
import HomeMainNav from './HomeMainNav.vue';
import HomeMainSectionLeft from './HomeMainSectionLeft.vue';
import HomeMainSectionRight from './HomeMainSectionRight.vue';
import HomeMainFooter from './HomeMainFooter.vue'
</script>
<style scoped lang='scss'>
.home__container--main {
  display: grid;
  padding: 1rem;
  overflow: hidden;
  width: calc(100% - 2rem);

  @include useTheme {
    background: getVar('mainBg');
    color: getVar('text');
  }

  .main_grid {
    display: grid;
    grid-template-columns: calc(26% - 2em) 37% 37%;
    grid-template-rows: 45% 55%;
    grid-template-areas:
      "nav left right"
      "nav main main";
    gap: 1em;
    height: 75vh;
  }
}
</style>